<div id="tb<?php echo $uniqid;?>" style="padding:5px">
	<table cellspacing="0" cellpadding="0"><tbody><tr>
		<td><a href="javascript:void(0);" onclick="activityAdd();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span class="l-btn-text">增加</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" onclick="activityEdit();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-bianji"></i><span class="l-btn-text">编辑</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" onclick="activityDelete();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shanchu"></i><span class="l-btn-text">删除</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
		<td>&nbsp&nbsp;<input id="activitykeywords" v-model="params.activitykeywords" style="width:200px" type="text" placeholder="输入活动名称或ID"
							  class="easyui-input textbox" @keyup.enter="init"></td>
		<td><a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询{{params.history?'历史活动':'当前活动'}}</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" @click="init(1);" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-wancheng1"></i><span class="l-btn-text">当前活动</span></span></a></td>
		<td>
			<div class="datagrid-btn-separator"></div>
		</td>
		<td><a href="javascript:void(0);" @click="history();" class="l-btn l-btn-small l-btn-plain"><span
				class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shijian-tianchong"></i><span class="l-btn-text">历史活动</span></span></a></td>

	</table>
</div>

<div class="con"  style="-moz-user-select:none;">
    <table id="activityManage"></table>
</div>
<div id="activitydlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
<script>
	var activityManageVm = new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			params: {
				activitykeywords: '',
				history: 0,
			},
			initLoad:false,
		},
		filters: {
			formatDate(nS){
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}
		},
		mounted() {
			setTimeout(()=>{
				this.mounted();
			}, 200);
		},
		methods: {
			mounted: function (){
				this.init();
			},
			init: function (e) {
				if('undefined' !== typeof e){
					$("#activityManage").datagrid('getPanel').panel('setTitle', '当前活动管理');
					this.params.history = 0;
					this.params.activitykeywords = '';
				}
				activityReload();
			},
			history:function () {
				$("#activityManage").datagrid('getPanel').panel('setTitle', '历史活动管理');
				this.params.history = 1;
				this.params.activitykeywords = '';
				activityReload();
			},
		}
	});
	var activityAdd=function(){
		$("#activitydlg").dialog({
			title: '添加活动',
			closed: false,
			width: 800,
			height:600,
			cache: false,
			href: '/admin/activity/add',
			modal: true,
			buttons:[{
				text:'保存',
				id:'activityaddsubmit',
				iconCls:'icon-ok',
			},{
				text:'关闭',
				iconCls:'icon-no',
				handler:function(){
					$("#activitydlg").dialog('close');
					delete activityAddVM.form;
					delete activityAddVM.goodsInfoList;
				}
			}]
		});
	}

	var activityToggleStatus = function (id, status_val) {
		let row_id = id || $('#activityManage').datagrid('getSelected').id;
		let status = status_val == 1?1:0;
		let status_text = '关闭';
		let action = 'turnoff';
		if(row_id){
			if(status === 1){
				status_text = '开启';
				action = 'turnon';
			}
			$.messager.confirm('提示','确定'+status_text+'吗？',function(r){
				if(r==true){
					$.messager.progress();
					$.post('/admin/activity/'+action, {id:row_id, status:status}, function(data){
						$.messager.progress('close');
						if(data.ret==0){
							$.messager.show({
								title:'提示',
								msg:data.msg,
								timeout:3000,
								showType:'slide'
							});
							activityReload();
						}else{
							$.messager.alert('提示',data.msg,'warning');
						}
					},'json');
				}
			});
		}else{
			$.messager.alert('提示','请先选择要操作的行！','warning');
		}
	}

	var activityEdit=function(id, status){
		if('undefined' === typeof id && $('#activityManage').datagrid('getSelected') == null){
			$.messager.alert('提示','请先选择要编辑的行！','warning');
			return false;
		}
		let row_id =  ('undefined' !== typeof id) ? id : $('#activityManage').datagrid('getSelected').id;
		let new_status = ('undefined' !== typeof status) ? status : $('#activityManage').datagrid('getSelected').status;
		if (row_id){
			if(new_status){
				$.messager.alert('提示','开启中的活动不能编辑，请关闭后，再编辑。','warning');
				return false;
			}
			$("#activitydlg").dialog({
				title: '编辑信息',
				closed: false,
				width: 700,
				height:500,
				cache: false,
				href: '/admin/activity/edit?id='+row_id,
				modal: true,
				buttons:[{
					text:'保存',
					id:'activityaddsubmit',
					iconCls:'icon-ok',
				},{
					text:'关闭',
					iconCls:'icon-no',
					handler:function(){$("#activitydlg").dialog('close');}
				}]
			});
		}else{
			$.messager.alert('提示','请先选择要编辑的行！','warning');
		}
	}
	var activityDelete=function(id){
		let row_id = id || $('#activityManage').datagrid('getSelected').id;
		if (row_id){
			$.messager.confirm('提示','确定彻底删除吗？',function(r){
				if(r==true){
					$.messager.progress();
					$.post('/admin/activity/forceDelete', {id:row_id}, function(data){
						$.messager.progress('close');
						if(data.ret==0){
							$.messager.show({
									title:'提示',
									msg:data.msg,
									timeout:3000,
									showType:'slide'
							});
							activityReload();
						}else{
							$.messager.alert('提示',data.msg,'warning');
						}
					},'json');
				}
			});
		}else{
			$.messager.alert('提示','请先选择要删除的行！','warning');
		}
	}
	var activityRestore=function(id){
		let row_id = id || $('#activityManage').datagrid('getSelected').id;
		if (row_id){
			$.messager.confirm('提示','确定恢复吗？',function(r){
				if(r){
					$.messager.progress();
					$.post('/admin/activity/restore', {id:row_id}, function(data){
						$.messager.progress('close');
						if(data.ret==0){
							$.messager.show({
									title:'提示',
									msg:data.msg,
									timeout:3000,
									showType:'slide'
							});
							activityReload();
						}else{
							$.messager.alert('提示',data.msg,'warning');
						}
					},'json');
				}
			});
		}else{
			$.messager.alert('提示','请先选择要删除的行！','warning');
		}
	}
	var activityRecycle=function(id){
		let row_id = id || $('#activityManage').datagrid('getSelected').id;
		if (row_id){
			$.messager.confirm('提示','确定加入回收站吗？',function(r){
				if(r==true){
					$.messager.progress();
					$.post('/admin/activity/delete', {id:row_id}, function(data){
						$.messager.progress('close');
						if(data.ret==0){
							$.messager.show({
									title:'提示',
									msg:data.msg,
									timeout:3000,
									showType:'slide'
							});
							activityReload();
						}else{
							$.messager.alert('提示',data.msg,'warning');
						}
					},'json');
				}
			});
		}else{
			$.messager.alert('提示','请先选择要删除的行！','warning');
		}
	}
	var activityReload=function(){
		if(activityManageVm.initLoad){
			activityManageVm.initLoad = false;
		}else{
			$("#activityManage").datagrid('load', activityManageVm.params);
		}
	}
	var activityLink = function (id) {
		$.post('/admin/activity/link', {id: id}, (data)=> {
			if (parseInt(data.ret) === 0) {
				let url = data.data; //拿到想要复制的值
				let copyInput = document.createElement('input');//创建input元素
				document.body.appendChild(copyInput);//向页面底部追加输入框
				copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性
				copyInput.select();//选择元素
				document.execCommand("Copy"); //执行复制命令
				$.messager.show({
					title: '提示',
					msg: data.msg,
					timeout: 3000,
					showType: 'slide'
				});
			} else {
				$.messager.alert('提示', data.msg, 'warning');
			}
		}, 'json');
	};
	var activitySearch=function(){
		var height = $(window).height() - $(".top").height() - 46;
		var width = $(window).width() - $(".leftmenu").width() - 8;
		$("#activityManage").datagrid({
			title: activityManageVm.params.history?'历史':'当前' + '活动管理',
			width: width,
			height: height,
			singleSelect:true,//如果为true，则只允许选择一行
			striped:true,//是否显示斑马线效果。
			rownumbers:false,//如果为true，则显示一个行号列。
			pagination:true,//是否显示分页
			pageSize:10,
			pageList:[10,15,20,25],
			method:'post',
			sortName:'id',
			sortOrder:'desc',
			url:'/admin/activity/index',
			queryParams : activityManageVm.params,
			fitColumns:true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap:true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck:false,
			checkOnSelect:true,
			toolbar: '#tb<?php echo $uniqid;?>',
			columns:[[
				{field:'id',title:'ID',width:fixWidth(5),align:'center'},
				{field:'type_text',title:'活动类型',width:fixWidth(5),align:'center'},
				{field:'title',title:'名称',width:fixWidth(15),align:'left', formatter: function (value, rowData, rowIndex) {
						return '<div>' + value + (rowData.deleted_at ? '<span style="color: red">（已删除）</span>' : '') + '</div></div>';
					}},
				{field:'goods_list',title:'活动商品',width:fixWidth(25),align:'center',formatter:function (value,rowData,rowIndex){
					let goods_content = '<div style="display: flex; align-items: center; max-width: 100%; flex-wrap: wrap;">';
					for(let i = 0; i < value.length; i ++){
						goods_content += '<a class="goods_tip" goods_id="'+value[i].id+'" title="'+value[i].title+'" href="javascript:void(0)" onclick="goodsTipClick(this)"><img style="width: 30px; height: 30px; margin: 0 2px; border-radius: 5px; border:1px solid #eee; overflow: hidden;" src="'+value[i].image+'"></a>';
					}
					goods_content += '</div>';
					return goods_content;
				}},
				{field:'status',title:'状态',width:fixWidth(5),align:'center',formatter:function (value,rowData,rowIndex){
						let status_content = '';
						if(value > 0){
							status_content += '<span style="color: #0eb913; font-weight: bold;">开启中</span>';
						}else{
							status_content += '<span style="color: #2f2e2e; font-weight: bold;">已关闭</span>';
						}
						return status_content;
					}},
				{field:'starttime_text',title:'开始日期',width:fixWidth(8),align:'center'},
				{field:'endtime_text',title:'结束日期',width:fixWidth(8),align:'center'},
				{field:'created_at',title:'创建时间',width:fixWidth(8),align:'center'},
				{field: 'options', title: '操作', width: fixWidth(15), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
					let buttons = '<div class="table">';
					if(rowData.status > 0){
						buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 10px;" onclick="activityToggleStatus(\'' + rowData.id + '\', 0)"><span class="l-btn-text" style="color: #d33632;">关闭</span></span>';
					}else{
						buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 10px;" onclick="activityToggleStatus(\'' + rowData.id + '\', 1)"><span class="l-btn-text" style="color: #0eb913;">开启</span></span>';
					}
					buttons += '<span class="l-btn l-btn-small color9 table" onclick="activityLink(\'' + rowData.id + '\')"><span class="l-btn-text">复制链接</span></span>';
					buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="activityEdit(\'' + rowData.id + '\', '+rowData.status+')"><span class="l-btn-text">编辑</span></span>';
					if (rowData.deleted_at){
						buttons += '<span class="l-btn l-btn-small color9 table" onclick="activityRestore(\'' + rowData.id + '\')"><span class="l-btn-text">恢复</span></span>';
						buttons += '<span class="l-btn l-btn-small color9 table" onclick="activityDelete(\'' + rowData.id + '\')"><span class="l-btn-text">彻底删除</span></span>';
					}else{
						buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="activityRecycle(\'' + rowData.id + '\')"><span class="l-btn-text">删除</span></span>';
					}
					return buttons + '</div>';
				}},
			]],
			onDblClickRow : function(index,field){
				activityEdit();
			}
		});
		activityManageVm.initLoad = true;
	}
	onDatagridResize("#activityManage");
	var goodsTipClick = function (ele) {
		let e = $(ele);
		let content = '<p>商品ID：<span style="color: #ee650c">'+e.attr('goods_id')+'</span></p>';
		content += '<p>商品标题：<span style="color: #ee650c">'+e.attr('title')+'</span></p>';
		e.tooltip({
			position: 'right',
			content: content,
			hideEvent: 'click',
			onShow: function(){
				$(this).tooltip('tip').css({
					width: '300px',
					fontSize: '14px',
					lineHeight: '1.5em',
					backgroundColor: '#ffffff',
					border: '1px solid #666'
				});
			}
		});
		if('undefined' !== typeof e.tooltip('tip')){
			e.tooltip('destroy');
		}else{
			e.tooltip('show');
			e.tooltip('tip').click(function () {
				e.tooltip('destroy');
			});
		}
	}
	activitySearch();
</script>
